<template>
    <div class="fu">
        {{ yy }}
        home
        <h1 v-creendirect="'red'">当前的求和为----{{ sum }}---$state:{{ storesum }}--{{ countStore.storesum }}</h1>
        <h1>{{ bigStoresum }}</h1>
        <h1>{{ smalleStoresum }}</h1>

        <select name="" id="" v-model.number="selectValue">
            <option value="1">1</option>
            <option value="5">5</option>
            <option value="10">10</option>
        </select>
        <button class="ml10" @click="addCount">add</button>
        <button class="ml10" @click="downCount">down</button>
        <button class="ml10" @click="storeaddCount">storeadd</button>
        <button class="ml10" @click="storedownCount">storedown</button>
        <h2>测试customRef----------{{ msg }}</h2>
        <span v-color="'red'">测试customRef-input</span> <input v-focus type="text" v-model="msg">

        <div style="margin: 10px;">
            <span v-big>身上方法身上方法身上方法身上方法身上方法身上方法身上方法身上方法</span>
        </div>
        <modal />
    </div>
</template>

<script lang='ts' setup>
import useref from '@/hooks/useref';
import { customRef, ref, onMounted } from 'vue'
import { useCountStore } from "@/store/count"
import { storeToRefs } from 'pinia';
import modal from './modal.vue';



onMounted(() => {
    function show(): never { //never

        throw new TypeError("ha")

    }
    // show()
    // =========================类==================
    class Dog {
        name: string
        age: number
        constructor(name: string, age: number) {
            // console.log("你好啊 小狗");
            this.name = name,
                this.age = age

        }
    }
    const dog = new Dog("ss", 11)
    const dog1 = new Dog("cc", 22)
    console.log(dog);
    console.log(dog1);

})
let { msg } = useref("哈哈", 2000)
let selectValue = ref(1)
let sum = ref(888)
let countStore = useCountStore()
let { storesum, bigStoresum, smalleStoresum } = storeToRefs(countStore)

//  =====================constomRef
let innitVale = "你好"
let timer: number
// let msg = customRef(() => {
//     return {
//         get() {
//             return "你好" //get msg被读取时调用 需要return返回值
//         },
//         set( value ) {
//             console.log("set");

//         }//修改时调用
//     }

// })
// let msg = customRef((track, trigger) => {   //track跟踪  trigger 触发 
//     return {
//         get() {
//             track()  //告诉vue 当前值这里指的msg很重要，要持续关注 一旦msg变化就去更新
//             return innitVale//get msg被读取时调用 需要return返回值
//         },
//         set(value) {
//             clearTimeout(timer)
//             timer = setTimeout(() => {
//                 console.log("set");
//                 innitVale = value
//                 trigger() //告诉vue 关注的值变化了
//             }, 1000)
//         }//修改时调用
//     }

// })

// 订阅
countStore.$subscribe((mutate, state) => {
    console.log("仓库变了", state);
    localStorage.setItem("dataSelf", state.adress)

})
const addCount = () => {

    sum.value += selectValue.value
}
const downCount = () => {
    sum.value -= selectValue.value
}
// store
const storeaddCount = () => {
    // （1）
    //  countStore.storesum += selectValue.value //第一种修改pinia数据的方式  直接修改  解构后使用storesum.value

    //（2） 
    countStore.$patch({   //第2种方法 使用$patch 对象形式更改
        storesum: 999,
        adress: "临港"
    })
    //   （3） 第三种方法 action

    // countStore.increment(selectValue.value)


}
const storedownCount = () => {
    //自己写  (1)  countStore.storesum -= selectValue.value
    //  (2)
    // countStore.$patch({
    //     storesum: 786666666,
    //     adress: "自己写"
    // })
    // （3）
    countStore.downce(selectValue.value)
}

const vColor = {
    mounted(el: any, binding: any) {
        el.style.color = binding.value
    }
}
</script>
<style scoped>
.fu {
    /* background: red; */
    filter: saturate(150%);
}

.ml10 {
    margin-left: 15px;
}
</style>